<template>
  <div id="warp">
    <div id="main">
      <router-view></router-view>
    </div>
    <div class="navigation">
      <router-link replace to="/index">
          <div class="icon"><i class="iconfont icon-shouye"></i></div>
          <div class="title">活动主页</div>
      </router-link>
      <router-link to="/profile">
        <div class="icon"><i class="iconfont icon-jieshao"></i></div>
        <div class="title">活动简介</div>
      </router-link>
      <router-link to="/register">
        <div class="icon"><i class="iconfont icon-shetuanhuodongbaoming"></i></div>
        <div class="title">活动报名</div>
      </router-link>
      <router-link to="/rank">
        <div class="icon"><i class="iconfont icon-paiming"></i></div>
        <div class="title">活动排名</div>
      </router-link>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      bottomNav: 'index',
      bottomNavColor: 'index'
    }
  },
  methods: {
    handleChange (val) {
      this.bottomNav = val
    }
  }
}
</script>

<style  src="./assets/styles/iconfont.css"></style>
<style src="./assets/styles/main.css"></style>
<style>
html,body,#warp{
width:100%;
  height:100%;
  overflow: hidden;
}
html{
  font-size:100px !important;
}
body{
  font-size:0.14rem

}
#main{
  height: 100%;
  padding-bottom: 56px;
  overflow: auto;
}
.navigation {
    width:100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background:#fff;
    height:56px;
    font-size:0;
}
.navigation a{
  width:25%;
  display:inline-block;
  color:#fb9abb;
  text-align:center;
}
.navigation a.router-link-active{
  color:rgb(244, 74, 132);
}
.navigation a .icon i{
  font-size:0.25rem
}
.navigation a  .title{
  font-size:0.14rem;
}

</style>
<script>

</script>
